<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.2.1.js"></script>
    <!-- 导入swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <!-- 导入iconfont -->
    <script src="https://at.alicdn.com/t/font_2206431_6qjb2nc7o0k.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2206431_6qjb2nc7o0k.css">
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="nav">
            <div>
                <p class="position">
                    <a href="javascript:void(0)">
                        武汉 <i class="iconfont icon-xiala"></i>
                    </a>
                </p>
                <p class="temperature">多云 22°c</p>
            </div>
            <div class="nav-input">
                <button></button>
                <input type="text" placeholder="易方达消费行业股票110022">
                <div class="yuyin">
                    <a href="javascript:void(0)"><i class="iconfont icon-yuyin"></i></a>
                </div>
            </div>
            
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-jiahao"></i>
                </a>
            </div>
        </div>
        <div class="nav-tool">
            <div class="nav-tool-body">
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-saoma"></i>
                        <p>扫一扫</p>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-qr-egress"></i>
                        <p>付款码</p>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-qiaquan"></i>
                        <p>红包/卡券</p>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-chuhang"></i>
                        <p>出行</p>
                    </a>
                </div>
                
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-changyonglogo40-copy"></use>
                            </svg>
                            <p>饿了么</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-koubei1"></use>
                            </svg>
                            <p>口碑</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiudian"></use>
                            </svg>
                            <p>酒店</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiuxian"></use>
                            </svg>
                            <p>休闲</p>
                        </a>
                    </div><div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianying"></use>
                            </svg>
                            <p>电影</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-car"></use>
                            </svg>
                            <p>打车</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youpinwangtubiao-"></use>
                            </svg>
                            <p>药店</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-meirong"></use>
                            </svg>
                            <p>医学美容</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuanzhang"></use>
                            </svg>
                            <p>转账</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jingdian"></use>
                            </svg>
                            <p>景点</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huabei"></use>
                            </svg>
                            <p>花呗</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xinyongqia"></use>
                            </svg>
                            <p>信用卡</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xuexi"></use>
                            </svg>
                            <p>学习</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiankangma"></use>
                            </svg>
                            <p>健康码</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ziyuanleixing-qichepiao"></use>
                            </svg>
                            <p>汽车票</p>
                        </a>
                    </div>
                </div>


                <div class="swiper-slide">
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tubiaoqietu_fuzhi_kouqiangyake"></use>
                            </svg>
                            <p>口腔牙科</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-game-current"></use>
                            </svg>
                            <p>电玩桌游</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huochepiaojipiao"></use>
                            </svg>
                            <p>火车票/机票</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-lirenmeirong"></use>
                            </svg>
                            <p>美容美发</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zuliaoanmo"></use>
                            </svg>
                            <p>足疗按摩</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yuechi"></use>
                            </svg>
                            <p>密室</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon-test"></use>
                            </svg>
                            <p>酒吧</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-lvyou"></use>
                            </svg>
                            <p>旅游</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youxuan"></use>
                            </svg>
                            <p>美团优选</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xianjin"></use>
                            </svg>
                            <p>借钱</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuangxiu"></use>
                            </svg>
                            <p>装修</p>
                        </a>
                    </div><div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gongyi"></use>
                            </svg>
                            <p>公益</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zu"></use>
                            </svg>
                            <p>汗蒸足浴</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zu1"></use>
                            </svg>
                            <p>新奇体验</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fuli"></use>
                            </svg>
                            <p>福利</p>
                        </a>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-maikefeng"></use>
                            </svg>
                            <p>KTV</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiuxian"></use>
                            </svg>
                            <p>休闲</p>
                        </a>
                    </div><div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianying"></use>
                            </svg>
                            <p>电影</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chongzhizhongxin"></use>
                            </svg>
                            <p>充值中心</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jianshen"></use>
                            </svg>
                            <p>健身房</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jingdian"></use>
                            </svg>
                            <p>景点</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huzhu"></use>
                            </svg>
                            <p>互助</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shuiguo2"></use>
                            </svg>
                            <p>水果</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zuliaoanmo"></use>
                            </svg>
                            <p>足疗按摩</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yuechi"></use>
                            </svg>
                            <p>密室</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon-test"></use>
                            </svg>
                            <p>酒吧</p>
                        </a>
                    </div>
                    <div class="swiper-item">
                        <a href="javascript:void(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chongwu"></use>
                            </svg>
                            <p>宠物</p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
    
        </div>


        <div class="message-body">
            <a href="">
                <p><span>·   11-16基金收益已更新</span> <span class="time">2小时前</span></p>
                <p><span>·   你有新的绿色能量待收取</span> <span class="time">3小时前</span></p>
                <p class="into">></p>    
            </a>
        </div>
        
        <div class="extension-body">
            <div class="swiper-container extension-container">
                <div class="swiper-wrapper extension-wrapper">
                    <div class="swiper-slide extension-slide">
                        <p><a href=""><span>碎屏险免费送</span><span>现金红包</span></a></p>
                        <p><a href=""><span>最高88元现金+提现免费额度</span></a></p>
                        <p class="money money-one"></p>
                    </div>
                    <div class="swiper-slide extension-slide">
                        <p><a href=""><span>参与</span><span>收益挑战</span></a></p>
                        <p><a href=""><span>一键收益升级   战胜余额宝</span></a> <a href=""><span>GO></span></a></p>
                        <p class="money money-two"></p>
                    </div>
                    <div class="swiper-slide extension-slide">
                        <p><a href=""><span>你有一张</span><span>药物补贴券</span></a></p>
                        <p><a href=""><span>购药直接抵扣</span></a> <a href=""><span>去领取></span></a></p>
                        <p class="money money-three"></p>
                    </div>
                    <div class="swiper-slide extension-slide">
                        <p><a href=""><span>余利宝体验金</span><span>有四位数额度</span></a></p>
                        <p><a href=""><span>体验余利宝领钱</span></a> <a href=""><span>立刻去></span></a></p>
                        <p class="money money-four"></p>
                    </div>
            
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination extension-pagination"></div>
            
            </div>
        </div>


        <div class="for-student">
            <div class="for-student-title">
                <p><a href="javascript:void(0)">特惠旅游</a></p>
                <p><a href="javascript:void(0)">狂享千万福利    丨</a></p>
                <p><a href="javascript:void(0)">低价好货</a></p>
            </div>
            <div class="for-student-list">
                <div class="for-student-list-body">
                    <a href="javascript:void(0)"><img src="images/跑车.jpg" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">三亚租车敞篷跑车自驾游海南</a></p>
                    <span><a href="javascript:void(0)" class="price">￥30</a></span>
                    <span><a href="javascript:void(0)" class="past-price">￥100</a></span>
                    <span><a href="javascript:void(0)">火爆</a></span>
                </div>
                <div class="for-student-list-body">
                    <a href="javascript:void(0)"><img src="images/劳斯莱斯.jpg" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">三亚接机劳斯莱斯迈巴赫</a></p>
                    <span><a href="javascript:void(0)" class="price">￥30</a></span>
                    <span><a href="javascript:void(0)" class="past-price">￥100</a></span>
                    <span><a href="javascript:void(0)">火爆</a></span>
                </div>
                <div class="for-student-list-body">
                    <a href="javascript:void(0)"><img src="images/滑翔伞.jpg" alt=""></a>
                    <p><a href="javascript:void(0)" class="title">湖北武汉滑翔伞，花山滑翔伞</a></p>
                    <span><a href="javascript:void(0)" class="price">￥60</a></span>
                    <span><a href="javascript:void(0)">距离最近</a></span>
                </div>
                
            </div>
        </div>

        <div class="test"></div>
        <div class="bottom-nav">
            <a href="javascript:void(0)">
                <div class="meituan .meituan-tuan">
                </div> 
            </a>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-licai"></i>
                    <p>理财</p>
                </a>
            </div>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-koubei4"></i>
                    <p>口碑</p>
                </a>
            </div>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-xiaoxi1"></i>
                    <p>消息</p>
                </a>
            </div>
            <div>
                <a href="javascript:void(0)">
                    <i class="iconfont icon-wode2-copy"></i>
                    <p>我的</p>
                </a>
            </div>
        </div>
        <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            })     


            $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop()
                    if(scrollTop>=200){
                        $(".meituan").removeClass("meituan-tuan")
                        $(".meituan").addClass("meituan-top")
                    }
                    else{
                        $(".meituan").removeClass("meituan-top")
                        $(".meituan").addClass("meituan-tuan")
                    }
                    console.log(scrollTop)   
            })
                $(".meituan").click(function(){
                    $("html").animate({scrollTop:"0"},1000)
                })


            $(".guset-like-top p").click(function(){
                $(".guset-like-top p a").removeClass("guset-like-top-get")
                $(this).children("a").addClass("guset-like-top-get")
            })

            // $(".bottom-nav .iconfont").click(function(){
            //     $(".bottom-nav .iconfont").removeClass("bottom-nav-get")
            //     $(this).addClass("bottom-nav-get")
            //     console.log("wwww")
            // })
            
        </script>
    </div>
    
</body>
</html>